<style scoped>
.main {
    width: 100%;
    height: 100%;
    background: url('https://4myblog.oss-cn-beijing.aliyuncs.com/treasure/bg/question/match_bg.jpg');
    background-repeat:no-repeat;
    background-position:center center;
}
.head {
    width: 100%;
    height: 25%;
    padding-top: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.profile {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
.content{
    height: 55%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
}
</style>

<template>
    <div class="main">
        <div class="head">
            <img class="profile" :src="my" alt="">
            <div style="font-size:30px; margin:10px">VS</div>
            <img class="profile" :src="rival" alt="">
        </div>
        <div class="content">
            {{this.ready?'匹配成功':'正在匹配中....'}}
        </div>
    </div>
</template>

<script>
export default {
    name: 'index',
    data () {
        return {
            ready: false,
            my:'https://4myblog.oss-cn-beijing.aliyuncs.com/treasure/avatar/8VD7CT2HDQQJWJDPLJCIDQY5LOBNDNKN.jpg',
            rival: 'https://4myblog.oss-cn-beijing.aliyuncs.com/treasure/avatar/8VD7CT2HDQQJWJDPLJCIDQY5LOBNDNKN.jpg'
        }
    },
    methods: {
        getUserId(){
            let userId = window.androidFunction.getUserId();
            return userId;
        },
        getAvatar(){
            this.my = window.androidFunction.getAvatar();
        }
    },
    mounted(){
        this.getAvatar();
        this.$websocket.initWs(this.getUserId());
        let _this = this;
        this.$websocket.ws.onmessage = function (message) {
            let data = JSON.parse(message.data);
            _this.rival = data['avatar'];
            _this.ready = true;
            _this.$websocket.sleep(2000).then(()=>{
                _this.$router.push({path:'/PK', query: {my: _this.my,rival: _this.rival}})
            })
        }
    },
    beforeDestroy(){
        if (!this.ready) this.$websocket.close();
    }
}
</script>

